<template>
    <div class="courseDetails">
      <mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
        <router-link to="" slot="left">
          <mt-button icon="back" @click="backOne()">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

      <form v-model="courseDetailsForm">
        <mt-field label="课程编号" v-model="courseDetailsForm.courseID" readonly="readonly"></mt-field>
        <mt-field label="课程名称" v-model="courseDetailsForm.courseName" readonly="readonly"></mt-field>
        <mt-field label="学分" v-model="courseDetailsForm.credit" readonly="readonly"></mt-field>
        <mt-field label="学时" v-model="courseDetailsForm.courseHour" readonly="readonly"></mt-field>
        <mt-field label="学时分配方式及时长" v-model="courseDetailsForm.courseHourAndLong" readonly="readonly"></mt-field>
        <mt-field label="学时分配"readonly="readonly">
          <mt-button @click="popupVisible=true" type="primary">点击查看分配</mt-button>
        </mt-field>
        <mt-popup
          v-model="popupVisible"
          position="bottom">
          <div class="popup-content">
            <mt-field label="讲课" v-model="courseDetailsForm.teachHour" readonly="readonly"></mt-field>
            <mt-field label="上机" v-model="courseDetailsForm.computerHour" readonly="readonly"></mt-field>
            <mt-field label="实验" v-model="courseDetailsForm.experimentHour" readonly="readonly"></mt-field>
            <mt-field label="实践" v-model="courseDetailsForm.practiceHour" readonly="readonly"></mt-field>

            <mt-button type="primary" @click="popupVisible=false">关闭</mt-button>
          </div>
        </mt-popup>

        <mt-field label="计分方式" v-model="courseDetailsForm.scoringWay" readonly="readonly"></mt-field>
        <mt-field label="课程大纲" v-model="courseDetailsForm.scoringWay" readonly="readonly"></mt-field>
      </form>
      <!--<form v-model="courseDetailsForm">
        <mt-field label="课程编号" v-model="courseID" readonly="true"></mt-field>
        <mt-field label="课程名称" v-model="courseName" readonly="true"></mt-field>
        <mt-field label="学分" v-model="credit" readonly="true"></mt-field>
        <mt-field label="学时" v-model="courseHour" readonly="true"></mt-field>
        <mt-field label="学时分配方式及时长" v-model="courseHourAndLong" readonly="true"></mt-field>
        <mt-field label="每周学时分配"readonly="true">
          <mt-button @click="popupVisible=true" type="primary">点击查看分配</mt-button>
        </mt-field>
        <mt-popup
          v-model="popupVisible"
          position="bottom">
          <div class="popup-content">
            <mt-field label="讲课" v-model="teachHour" readonly="true"></mt-field>
            <mt-field label="上机" v-model="computerHour" readonly="true"></mt-field>
            <mt-field label="实验" v-model="experimentHour" readonly="true"></mt-field>
            <mt-field label="实践" v-model="practiceHour" readonly="true"></mt-field>

            <mt-button type="primary" @click="popupVisible=false">关闭</mt-button>
          </div>
        </mt-popup>

        <mt-field label="计分方式" v-model="scoringWay" readonly="true"></mt-field>
        <mt-field label="课程大纲" v-model="scoringWay" readonly="true"></mt-field>
      </form>-->

    </div>
</template>
<style>
  .popup-content{
    height: 40vh;
    width: 100vw;
    text-align: center;
  }
</style>
<script>
    export default{
        name : 'courseDetails',
        data(){
            return{
                courseDetailsForm:{
                    courseID: '123',
                    courseName:'计算机组成原理',
                    credit:'4',
                    courseHour:'5',
                    courseHourAndLong:'5',
                    //week:'52',

                    scoringWay:'5',
                    //
                    teachHour:'20',
                    computerHour:'15',
                    experimentHour:'50',
                    practiceHour:'18'
                },
                //
                popupVisible:false,
            }
        },
        components:{
        },
        mounted:function(){
            this.$nextTick(function(){
                //保存进来时候的id
                //this.oldMajorId = this.$route.params.majorId;
                //表单内的id赋值
                //this.updateProfessionForm.majorId = this.$route.params.majorId;
                //获取id对应的内容
                //this.getIDRes(this.updateProfessionForm.majorId);
                this.courseDetailsForm.courseID = this.$route.params.courseId;
            })
        },
        methods:{
            //back router
            backOne:function(){
                this.$router.back();
            }
        }
    }
</script>
